<template>
	<div>
		<el-upload :action="actionurl" list-type="picture-card" :file-list="fileList2" :headers="head" :limit="1" :on-preview="handlePictureCardPreview"
		 :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-exceed="handleExceed">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible" size="tiny">
			<img width="100%" :src="url" alt="">
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: {
			actionurl: {
				type: String
			},
			url: {
				type: String
			},
		},
		data() {
			return {
				fileList2: [],
				dialogImageUrl: this.url ? this.url : '',
				dialogVisible: false
			};
		},
		mounted() {
			this.shixiang(this.url)
		},
		watch: {
			'url': function(n, o) { //根据扩展信息选项监控传值信息
				this.shixiang(n)
			}
		},
		computed: {
			head() {
				return {
					Authorization: localStorage.getItem('authorization')
				}
			},
		},
		methods: {
			shixiang(a) {
				if (a) {
					this.$set(this.fileList2, 0, {
						name: '图标',
						url: a
					});
				} else {
					this.fileList2 = []
					this.dialogImageUrl = ''
				}
			},
			handleExceed(files, fileList) {
				this.$message.warning('只能上传一张图片');
			},
			handleAvatarSuccess(response, file, fileList) {
				this.$message({
					message: '上传成功',
					type: 'success'
				});
				this.$emit("test", response)
			},
			beforeAvatarUpload(file) {
				console.log("aa")
			},
			handleRemove(response,file, fileList) {
				this.$emit("dele", response)
			},
			handlePictureCardPreview(file) {
				//this.fileList2 = []
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		}
	}
</script>
<style>
	.v-modal {
		z-index: 1000 !important;
	}
</style>
<style scoped>
	.el-upload.el-upload--text {
		border-radius: 0;
	}
</style>
